<template>
  <div class="header">
    <h2 id="mnavh" :class="is_open" @click="show()"><span class="navicon"></span></h2>
    <div class="logo-site-title">
      <a href="/" class="brand" rel="start" style="opacity: 1;">
        <span class="logo-line-before"><i class="" style="transform: translateX(100%);"></i></span>
        <span class="site-title" style="opacity: 1; top: 0px;">Mr.Yong<span class="is_show">个人博客</span></span>
        <span class="logo-line-after"><i class="" style="transform: translateX(-100%);"></i></span>
      </a>
    </div>
    <el-menu @select="selectMenu" :router=true menu-trigger="click" :class="menu_show" :default-active="activeIndex" class="d-flex header-ul  animated fadeInDown"  mode="horizontal"  type="flex">
      <nav id="menu-bar">
        <el-menu-item index="/"><i class="iconfont icon-home"></i> {{ $t("header.home") }}</el-menu-item>
        <el-menu-item index="/tags"><i class="iconfont icon-tags"></i> {{ $t("header.tags") }}</el-menu-item>
        <el-menu-item index="/category"><i class="iconfont icon-category"></i> {{ $t("header.category") }}</el-menu-item>
        <el-menu-item index="/archives"><i class="iconfont icon-archive"></i> {{ $t("header.archive") }}</el-menu-item>
        <el-menu-item index="/message"><i class="iconfont icon-comment"></i> {{ $t("header.message") }}</el-menu-item>
        <el-menu-item index="/link"><i class="iconfont icon-link"></i> {{ $t("header.link") }}</el-menu-item>
        <el-menu-item class="last-li" index="/about"><i class="iconfont icon-user"></i> {{ $t("header.about") }}</el-menu-item>
        <el-submenu style="display:none" class="lang" index='1'>
            <template  slot="title"><i class="iconfont icon-language"></i> {{ $t("header.language") }}</template>
            <el-menu-item index='zh' @click="toggleLang('zh')">{{$t("header.chinaese")}}</el-menu-item>
            <el-menu-item index='en' @click="toggleLang('en')">{{$t("header.english")}}</el-menu-item>
        </el-submenu>
        <a href="http://vue.myong.top/" class="back_old" target="_blank" style="line-height: 3.9;font-size: 14px;white-space: nowrap">旧版博客 >></a>
        <el-autocomplete style="display:none" v-model="state" :fetch-suggestions="querySearchAsync"  placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
      </nav>
    </el-menu>
    <a href="https://gitee.com/yong-top" target="_blank" class="github-corner">
      <svg width="60" height="60" viewBox="0 0 250 250" style="fill:#FD6C6C; color:#fff; position: absolute; top: 0; border: 0; right: 0;">
        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
        <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
      </svg>
    </a>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  name: "Header",
  data() {
    return {
      activeIndex: '/',
      restaurants: [],
      state: '',
      timeout:  null,
      is_open:'',
      menu_show:'m-hide',
    };
  },
  mounted(){
    //console.log(localStorage.getItem('locale'));
    this.$i18n.locale = localStorage.getItem('locale') == null ? 'zh' : localStorage.getItem('locale');
    this.restaurants = this.loadAll();
  },
  methods:{
      show(){
        //this.menu_show = this.menu_show == 'm-hide' ? 'm-show':'m-hide';
        this.is_open = this.is_open == '' ? 'open' : '';
        this.menu_show = this.is_open == 'open' ? 'm-show' : 'm-hide';
      },
      selectMenu(key, keyPath) {
        // let pathname = window.location.pathname;
        // console.log(pathname)
        // if(pathname.indexOf('view') != -1){
        //   pathname = '/category'
        // }

        // if(pathname.indexOf('archives') != -1){
        //   pathname = '/archives'
        // }
        this.activeIndex = key
        this.is_open = '';
        this.menu_show = 'm-hide';
      },
      loadAll() {
        return [
          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
        ];
      },
      querySearchAsync(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 3000 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        console.log(item);
      },
      toggleLang(lang) {
        if(lang === 'zh') {
            localStorage.setItem('locale', 'zh')
            this.$i18n.locale = localStorage.getItem('locale')
            this.$message({
                message: '切换为中文！',
                type: 'success'
            })
        } else if(lang === 'en') {
            localStorage.setItem('locale', 'en')
            this.$i18n.locale = localStorage.getItem('locale')
            this.$message({
                message: 'Switch to English!',
                type: 'success'
            })
        }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.github-corner:hover .octo-arm {
  animation: octocat-wave 560ms ease-in-out
}
@keyframes octocat-wave {
  0%, 100% {
    transform: rotate(0)
  }
  20%, 60% {
    transform: rotate(-25deg)
  }
  40%, 80% {
    transform: rotate(10deg)
  }
}
@media (max-width: 500px) {
  .github-corner:hover .octo-arm {
    animation: none
  }
  .github-corner .octo-arm {
    animation: octocat-wave 560ms ease-in-out
  }
}
.header
    width 65%
    display flex
    justify-content center
    margin-bottom 50px
    height auto
    margin 0 auto
    .logo-site-title
      padding-right 23%
    .brand
      position relative
      display inline-block
      color #222
      border-bottom none
      background none
      padding 2px 2px 1px 20px
      margin 8px auto
      .logo-line-before
        display block
        overflow hidden
        margin 0 auto
        width 75%
        i
          position relative
          display block
          height 2px
          background #222
          left -100%
      .logo-line-after 
        display block
        overflow hidden
        margin 0 auto
        width 75%
        i
          position relative
          display block
          height 2px
          background #222
          right -100%
      .site-title 
        display inline-block
        vertical-align top
        line-height 36px
        font-size 24px
        font-weight normal
        font-family 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif
        position relative
        font-size 22px
        font-weight bolder
        .is_show
          display none
    .el-autocomplete
      padding 10px
    .header-ul
      width 65%
      border-bottom none 
      display flex
      .logo
        text-align left
        flex 1 
        font-size 22px
        font-weight bolder
      nav 
        display flex

</style>
